<template>
  <!-- 展示商品列表 -->
  <div>
    <!-- 展示商品列表 -->
    <template>
      <div class="one">
        <a-card class="ACard">
          <!-- top -->
          <div class="top">
            <!-- top-left -->
            <span class="top-left">
              <!-- <svg class="icon"></svg> -->
              <a-icon type="search" style="font-size:20px;font-weight:400" />
              筛选搜索
            </span>
            <!-- top-right -->
            <div class="top-right">
              <a-button style="font-size:12px">重置</a-button>

              <a-button type="primary" style="margin-left: 15px;font-size: 12px;">
                查询结果
              </a-button>
            </div>
          </div>

          <!-- form -->
          <a-form layout="inline" class="my-form">
            <!-- 上部分 -->
            <div class="form-t">

              <!-- 搜索内容 -->
              <a-form-item class="form_one" label="输入搜索">
                <a-input
                  placeholder="商品名称"
                />
              </a-form-item>
              <!-- 商品货号 -->
              <a-form-item class="form_one" label="输入搜索">
                <a-input
                  placeholder="商品货号"
                />
              </a-form-item>

              <!-- 商品分类 -->
              <div>
                <label class="label">商品分类:</label>
                <a-cascader :options="options" placeholder="请选择" @change="onChange" />
              </div>

            </div>

            <!-- 下部分 -->
            <div class="form-b">
              <!-- 左 -->
              <div>
                <label>商品品牌：</label>
                <a-select style="width:200px" placeholder="请选择品牌" @change="handleChange">
                  <a-select-option value="huawei">
                    华为
                  </a-select-option>
                  <a-select-option value="xiaomi">
                    小米
                  </a-select-option>
                  <a-select-option value="nojiya">
                    诺基亚
                  </a-select-option>
                  <a-select-option value="nigger">
                    8848
                  </a-select-option>
                </a-select>
              </div>

              <!-- 中 -->
              <div>
                <label>上架状态：</label>
                <a-select style="width:200px" placeholder="全部" @change="handleChange">
                  <a-select-option value="huawei">
                    上架
                  </a-select-option>
                  <a-select-option value="xiaomi">
                    下架
                  </a-select-option>
                </a-select>
              </div>
              <!-- 右 -->
              <div>
                <label>审核状态：</label>
                <a-select style="width:200px" placeholder="全部" @change="handleChange">
                  <a-select-option value="huawei">
                    审核通过
                  </a-select-option>
                  <a-select-option value="xiaomi">
                    未通过
                  </a-select-option>
                </a-select>
              </div>
            </div>

          </a-form>
        </a-card>

        <a-card class="BCard">
          <div class="wtf">
            <!-- 左 -->
            <div class="l">
              <a-icon type="database" />
              <label>数据列表</label>
            </div>
            <!-- 右 -->
            <div class="r">
              <a-button>添加</a-button>
            </div>
          </div>

        </a-card>

        <a-card class="CCard">
          <!-- :row-selection="rowSelection"   即是左侧按钮 -->
          <!-- 数据来源是Cdata，循环遍历 -->
          <a-table
            :row-selection="rowSelection"
            :columns="columns"
            :data-source="Cdata"
            bordered
          >
            <!-- <block v-for="(item,index) in CCard" :key="index"> -->
            <!-- 商品名称 -->
            <span slot="product_nameAndBrand" class="product_nameAndBrand">
              <p>{{ Cdata[0].product_name }}</p>
              <p>{{ Cdata[0].product_brand }}</p>
              <!-- <p>{{ Cdata[0].product_name }}</p> -->
            </span>
            <!-- 价格： -->
            <span slot="articl_numAndPrice" class="articl_numAndPrice">
              <p>价格： ￥{{ price }}</p>
              <p>货号： {{ articl_num }}</p>
            </span>
            <!-- 标签 -->
            <span slot="CLabel" class="CLabel">
              <p>上架：<a-switch v-model="isShelves" /></p>
              <p>新品：<a-switch v-model="newProduct" /></p>
              <p>推荐：<a-switch v-model="recommend" /></p>
            </span>
            <!-- sku库存 -->
            <span slot="SKU_inventory" class="SKU_inventory">

              <button type="button" class="SKU_inventory_btn" @click="SKU_btn">
                <svg t="1665992869179" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="23211" width="25" height="25"><path d="M813.1072 246.2208l-94.8224-94.8224a71.3216 71.3216 0 0 0-41.6768-18.9952 53.9136 53.9136 0 0 0-44.4416 13.4656l-9.984 9.9328c-192.768 191.488-325.9392 324.2496-374.8864 373.76a142.0288 142.0288 0 0 0-37.9904 67.3792l-33.3312 135.6288a63.3344 63.3344 0 0 0 16.2816 59.0336l0.3584 0.4096a62.0032 62.0032 0 0 0 43.4176 19.2512 50.5344 50.5344 0 0 0 17.0496-2.9184c0.8192-0.3072 83.0976-31.4368 137.4208-51.2a193.1264 193.1264 0 0 0 64.5632-41.8816l358.0928-358.0928a78.1312 78.1312 0 0 0 0-110.6944z m-143.616-59.9552a19.2512 19.2512 0 0 1 9.5232 3.328l94.8224 94.8224a22.8864 22.8864 0 0 1 0 33.2288l-27.7504 27.7504-117.76-117.76c8.8576-8.8064 16.6912-16.5376 23.1936-22.8864 8.96-9.1648 14.4896-14.6944 17.9712-18.4832zM588.8 267.776l117.76 118.016-290.816 288.8192-3.3792 3.2768L384 620.032l-0.8192-1.4336-1.28-1.9968a38.1952 38.1952 0 0 0-8.9088-10.752 75.4688 75.4688 0 0 0-11.2128-8.6528l-67.9424-35.4304C356.0448 498.3808 501.76 353.536 588.8 267.776z m-223.9488 438.3232c-48.5888 19.0976-117.76 44.4928-129.1776 48.64a11.7248 11.7248 0 0 1-5.12-3.1232 9.0112 9.0112 0 0 1-3.2256-6.144l34.4576-135.6288v-1.024c0-0.768 0.256-1.4848 0.4608-2.2528l71.3728 37.0176zM823.296 901.12H220.8768a32.256 32.256 0 1 1 0-64.512H823.296a32.256 32.256 0 1 1 0 64.512z" p-id="23212" fill="#e6e6e6" /></svg>
              </button>

            </span>
            <!-- 商品图片 -->
            <span slot="product_img">
              <img style="height: 80px;" :src="Cdata[0].product_img" alt="商品图片" title="商品图片">
            </span>

            <!-- 审核状态： -->
            <span slot="audit_status">
              <!-- 1 -->
              <p v-if="audit_status === false">未审核</p>
              <p v-else>已审核</p>
              <a href="###">审核详情</a>
            </span>

            <!-- 操作 -->
            <span slot="operate" class="operate">
              <div>
                <a-button style="font-size:12px" size="small">查看</a-button>
                <a-button size="small" style="font-size:12px">编辑</a-button>
              </div>
              <div>
                <a-button style="font-size:12px" size="small">日志</a-button>
                <a-button size="small" style="font-size:12px" type="danger">删除</a-button>
              </div>
            </span>

            <!-- </block> -->
          </a-table>
        </a-card>
      </div>

      <!-- 对话框 -->
      <a-modal v-model="visible" class="toking" ok-text="确认" cancel-text="取消" @ok="handleOk">
        <div class="wt_top">编辑货品信息</div>
        <!-- 上方搜索部分 -->
        <div class="Ctake_top" style="display:flex;">
          <div class="o">商品货号：{{ articl_num }}</div>
          <div class="t">
            <a-input-search
              v-model="value"
              placeholder="按sku编号搜索"
              enter-button
              style="width:200px"
              @search="onSearch"
            />
          </div>
        </div>

        <!-- 下方表格部分 -->
        <!-- 货品信息编辑表格 -->
        <a-table
          class="takeTabel"
          :columns="tokeColumns"
          bordered
          :data-source="Cdata"
          :pagination="false"
        >
          <!-- :pagination="false" 清除默认自带的分页选择 -->
          <span slot="SKU_number">
            <!-- <input type="text" class="takeInput"> -->
            <a-input v-model="SKU_number" placeholder="编号" />
          </span>

          <span slot="price">
            <a-input v-model="price" placeholder="价格" />
          </span>

          <span slot="SKU_inventory">
            <a-input v-model="SKU_inventory" placeholder="库存" />
          </span>

          <span slot="SKU_prewarning">
            <a-input v-model="SKU_prewarning" placeholder="" />
          </span>
        </a-table>
      </a-modal>

    </template>

  </div>

</template>

<script>

export default {
  data() {
    return {
      // 对话框是否显示
      visible: false,

      // 商品分类数据
      options: [
        {
          value: 'one',
          label: '一级',
          children: [
            {
              value: 'two',
              label: '二级'
            }
          ]
        },

        {
          value: '1',
          label: 'ONE',
          children: [
            {
              value: '2',
              label: 'TWO'
            }
          ]
        }
      ],

      // tabel表格
      // 表格，列设置
      columns: [
        {
          // ellipsis: true //超出文本隐藏
          title: '编号',
          dataIndex: 'product_id', // 商品编号
          align: 'center', // 居中显示
          width: 70
        },
        {
          title: '商品图片',
          // dataIndex: 'product_img', // 图片
          // dataImage: 'product_img', // 图片
          scopedSlots: { customRender: 'product_img' },
          align: 'center', // 居中显示
          width: 120
        },
        {
          align: 'center', // 居中显示
          title: '商品名称',
          dataIndex: 'product_nameAndBrand', // 商品名称\品牌
          // 使用插槽
          scopedSlots: { customRender: 'product_nameAndBrand' },
          width: 160
        },
        {
          title: '价格/货号',
          // 也可以直接声明需要的数据名，使用自定义插槽直接传入数据
          // 插槽名即是所需数据名
          // dataIndex: 'articl_numAndPrice', // 商品价格、货号
          scopedSlots: { customRender: 'articl_numAndPrice' },
          align: 'center', // 居中显示
          width: 180
        },
        {
          title: '标签',
          scopedSlots: { customRender: 'CLabel' },
          width: 120,
          align: 'center' // 居中显示
        },
        {
          title: '排序',
          dataIndex: 'sort_num',
          width: 100,
          align: 'center' // 居中显示
        },
        {
          title: 'SKU库存',
          scopedSlots: { customRender: 'SKU_inventory' },
          width: 100,
          // key: 'address 3',
          align: 'center' // 居中显示
          // ellipsis: true
        },
        {
          title: '销量',
          dataIndex: 'sales',
          width: 100,
          align: 'center'
          // key: 'address 3',
          // ellipsis: true
        },
        {
          title: '审核状态',
          // dataIndex: 'audit_status',
          scopedSlots: { customRender: 'audit_status' },
          width: 100,
          // key: 'address 3',
          // ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          // dataIndex: 'address',
          scopedSlots: { customRender: 'operate' },
          // width: 160,
          align: 'center' // 居中显示
        }
      ],
      // 表单列，数据，整个数组都是后台获取
      Cdata: [
        {
          key: '1',
          product_id: 10, // 商品编号
          product_name: '华为 HUAWEI P20', // 商品名称
          product_brand: '华为', // 商品品牌
          sort_num: 100, // 排序
          // 商品图片
          product_img: 'https://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180607/5ac1bf58Ndefaac16.jpg', // 商品图片
          sales: 10, // 商品销量
          SKU_color: '金色', // 商品颜色
          SKU_capacity: '16G' // 商品容量
          // audit_status: false // 审核状态
        },
        {
          key: '2',
          product_id: 20, // 商品编号
          product_name: '华为 HUAWEI P20', // 商品名称
          product_brand: '华为', // 商品品牌
          sort_num: 100, // 排序
          // 商品图片
          product_img: 'https://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/xiaomi.jpg' // 商品图片
          // sales: 10 // 商品销量
        },
        {
          key: '3',
          product_id: 30, // 商品编号
          product_name: '华为 HUAWEI P20', // 商品名称
          product_brand: '华为', // 商品品牌
          sort_num: 100, // 排序
          // 商品图片
          product_img: 'https://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/5a9d248cN071f4959.jpg' // 商品图片
          // sales: 10 // 商品销量
        }

      ],

      // 对话框，货品信息编辑
      // 列设置
      tokeColumns: [
        {
          title: 'SKU编号',
          scopedSlots: { customRender: 'SKU_number' },
          align: 'center' // 居中显示
        },
        {
          title: '颜色',
          dataIndex: 'SKU_color', // 商品颜色
          align: 'center', // 居中显示
          width: 90
        },
        {
          title: '容量',
          dataIndex: 'SKU_capacity',
          // scopedSlots: { customRender: 'SKU_number' },
          align: 'center', // 居中显示
          width: 85
        },
        {
          title: '销售价格',
          scopedSlots: { customRender: 'price' },
          align: 'center' // 居中显示
        },
        {
          title: '商品库存',
          scopedSlots: { customRender: 'SKU_inventory' },
          align: 'center' // 居中显示
        },
        {
          title: '库存预警值',
          scopedSlots: { customRender: 'SKU_prewarning' },
          align: 'center' // 居中显示
        }
      ],

      // 商品图片
      // product_img: 'https://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/images/20180615/5a9d248cN071f4959.jpg' // 商品图片

      isShelves: true, // 上架状态
      newProduct: true, // 是否新品
      recommend: true, // 是否推荐

      articl_num: 6946605, // 商品货号
      price: 4399, // 商品售价
      // product_name: '华为 HUAWEI P20', // 商品名称
      // product_brand: '华为', // 商品品牌

      SKU_number: 201806070026001, // SKU编号
      SKU_inventory: 100, // SKU库存
      SKU_capacity: '16G', // 商品容量
      sales: 10, // 商品销量
      audit_status: false, // 审核状态
      SKU_prewarning: ''// 库存预警值

    }
  },

  computed: {
    // 联动复选框
    rowSelection() {
      return {
        onChange_rowSelection: (selectedRowKeys, selectedRows) => {
          console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows)
        },
        getCheckboxProps: record => ({
          props: {
            disabled: record.name === 'Disabled User', // Column configuration not to be checked
            name: record.name
          }
        })
      }
    }
  },

  methods: {
    SKU_btn() {
      console.log('SUK_btn被触发，打开对话框')
      this.visible = true
    },

    handleOk(e) {
      console.log('获取参数,关闭弹层：', e)
      this.visible = false
      console.log('??')
    }
  }

}
</script>

<style lang="scss">
.one{
  border-top: 1px solid #ECECEC;
  background-color: white;
  // background-color: pink;
  padding: 20px;
  .ACard{
    border:1px solid #ECECEC;
    border-radius: 5px;
    .top{
      display: flex;
      justify-content: space-between;
      .top-left{
        font-size: 16px;
      }
    }
    // form
    .my-form{
      width: 100%;

      input{
        width: 200px;
        white-space: pre-wrap;
      }
      .form-t{
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 10px 20px;
        div{
          display: flex;
          vertical-align: baseline;
          .label{
            font-size: 15px;
            line-height: 30px;
            margin-right: 10px;
            white-space: nowrap;
          }
        }
      }

      .form-b{
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 10px 10px;
      }
    }
    .ant-form label{
        font-size: 15px;
        font-weight: 400;
    }

  }

  .BCard{
    border:1px solid #ECECEC;
    margin: 20px 0;
    border-radius: 5px;
    .wtf{
      display: flex;
      justify-content: space-between;
      .l{
        font-size: 16px;
        label{
          font-weight: 500;
          margin-left: 10px;
        }
      }
    }
  }

  .CCard{
    // border:1px solid #ECECEC;
    // 设置卡片和表格的边距
    .ant-card-body{
      margin: 0;
      padding: 0;
    }
    // text-align: center;
    // 商品名称
    .product_nameAndBrand{
      white-space: nowrap;
    }
    // 商品价格
    .articl_numAndPrice{
      white-space: nowrap;
    }
    // 商品标签
    .CLabel{
      white-space: nowrap;
    }
    // sku库存
    .SKU_inventory{
      .SKU_inventory_btn{
        // text-align: center;
        line-height: 10px;
        border: none;
        background-color: #1296db;
        cursor: pointer;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        padding: 0;
      }

      :hover{
        background-color: #6cbbe6;
      }

    }
    // th 样式
    .ant-table-column-title{
      font-weight: 800;
      color: #656667;
    }
    // 操作
    .operate{
      div{
        display: flex;
        justify-content: space-around;
        margin: 10px 0;
      }

    }
  }

}

// 对话框样式
.toking{
  .ant-modal-content{
    // 对话框宽度
    width: 620px;
  }
  .wt_top{
    font-size: 18px;
    font-weight: 500;
    color: #525254;
    margin-bottom: 30px;
  }

  .Ctake_top{
    margin-bottom: 20px;
    .o{
      margin-right: 35px;
      padding-top: 5px;
    }
    .t{
      input{
        width: 200px;
        border: 1px solid rgb(230, 226, 226);
        outline: none;
      }
      button{
        width: 60px;
        color: rgb(78, 76, 76);
        background-color: rgb(230, 226, 226);
        border: 1px solid rgb(230, 226, 226);
      }
    }
  }

  // 对话框中下方表格
  .takeTabel{
    // 输入框
    input{
      display: inline-block;
      border: 0.5px solid rgb(140, 138, 139);
      border-radius: 4px;
    }
  }
}
</style>

